//1.tasks 数据结构
let tasks = [
    { id: 1, text: "睡觉", completed: false },
    { id: 2, text: "吃饭", completed: true },
    { id: 3, text: "刷抖音", completed: false }
];
console.log(tasks);

//2.获取元素
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category = document.querySelector(".category")
let inputSearch = document.querySelector(".search input")


//3. 事件添加

// window onload 事件
window.addEventListener('load', function () {
    // 渲染
    renderTasks(tasks);
    //添加事件
})
// 添加按钮
addBtn.addEventListener('click', function () {
    //数据添加
    //1.产生数据-task对象
    //数组最有一个值+1
    let id = tasks[tasks.length - 1].id + 1;
    const task = {
        id: id, text: inputText.value, completed: false
    };
    //2.把对象放到tasks数组中
    tasks.push(task);
    //3.显示下
    // console.log(tasks);
    //4.渲染
    renderTasks(tasks);

});
// category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click', function (e) {
    if (e.target.tagName == "BUTTON") {
        // 获取自定义属性中的值
        const filter = e.target.dataset.filter;
        //渲染
        renderTasks(filterTasks(tasks, filter))
    }
})
// 搜索框enter后触发修改数据
inputSearch.addEventListener('keydown', function (e) {
    // 按下回车键
    if (e.key === 'Enter') { // 注意这里的'Enter'首字母大写
        // 判断搜索框是否为空
        const searchValue = inputSearch.value.trim();
        if (searchValue !== "") {
            // 根据搜索框中的值过滤数组中每个元素的text值，得到一个新数组
            const searchTasks = tasks.filter(task => task.text.includes(inputSearch.value.trim()));
            // 渲染过滤后的任务列表
            renderTasks(searchTasks);
        } else {
            // 搜索框为空
            window.alert("输入框不能为空！");

        }
    }
});
// 使用事件委托处理删除操作
ul.addEventListener('click', function (e) {
    removeTask(e)
    changeStatus(e)
})

// 4.函数
function renderTasks(tasks) {
    // 任务列表的渲染
    //清空现有ul中html
    ul.innerHTML = '';
    tasks.forEach(task => {
        // 创建一个元素
        const li = document.createElement('li');
        // 修改元素的html内容
        li.innerHTML = `<div class="left">
              <input type="checkbox" ${task.completed ? 'checked' : ''} >
              <span class="${task.completed ? 'line' : ''}">${task.text}</span>
            </div>
            <div class="btn-group">
              <button class="editBtn">编辑</button>
              <button class="delBtn">删除</button>
            </div>
        `;
        // 修改li中checkbox的checked属性
        // const input = li.querySelector("input");

        // input.checked = task.completed;
        // console.log(input.checked);
        // 找删除按钮
        const delBtn = li.querySelector(".delBtn")
        // delBtn.onclick = removeTask; 
        // 绑定删除函数
        // delBtn.onclick = ()=>removeTask(task.id)
        delBtn.addEventListener('click', function (e) {
            removeTask(task.id, e)
        })
        // 把元素放到ul中
        ul.appendChild(li)
        // 底部统计数据的渲染
        //生成统计数据
        let all = tasks.length;
        let completed = tasks.filter(task => task.completed).length;
        let uncompleted = all - completed;

        // 修改对应元素的数据
        // const spans = document.querySelectorAll('.footer span');
        // spans[0].textContent = `全部 ${all}`;
        // spans[1].textContent = `已完成 ${completed}`;
        // spans[2].textContent = `未完成 ${uncompleted}`;

        //获取元素的另外的方法
        document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
        document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
        document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
    });
}
// 改变task的完成属性值
function changeStatus(e) {
    let li;
    if (e.target.nodeName == "INPUT") {
        const id = e.target.dataset.id;
        console.log(id);
        const task = tasks.find(task=>task.id==id);
        console.log(task);
        console.log(e.target.checked);
        task.completed =e.target.checked
        // 修改后面文本样式
        e.target.parentElement.children[1].classList.toggle('line')
        
        
        
    }
}
// 删除功能
function removeTask(e) {
    let li;
    // console.log(id);
    // tasks.splice(id,1)
    // 交互
    // e.target是被点击的元素，在这里为删除按钮
    // 找到按钮所在的li元素,并将其从DOM中移除

    // renderTasks(tasks);
    // 重新渲染
    if (e.target.nodeName == "BUTTON") {
        // console.log(e.target.className);
        // 删除数据
        // 交互
        // 获取包含删除按钮的li元素
        const id = e.target.dataset.id
        tasks = tasks.filter(task => task.id !== id);
        li = e.target.parentElement.parentElement
        // 自己删自己
        //  li.remove()
        // 在父元素删孩子
        ul.removeChild(li)
    }

}
// 编辑功能
function editTask(id) {

}
/*
  功能：分类过滤函数
  输入：tasks-所有任务，filter[all,completed,uncompleted] 
  输出：过滤后的任务
*/
function filterTasks(tasks, filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task => task.completed);
        case "uncompleted":
            return tasks.filter(task => !task.completed);
        default:
            return tasks;
    }
}



